<template>
	<view class="">
		<view class="fixed" @click="showM(1)" style="display: none;"><text>添加分校</text></view>
		<view class="fixed" @click="showM(2)" style="bottom: 230rpx; display: none;"><text>添加销售</text></view>
		<u-modal v-model="show" :title-style="{ color: 'red' }" @confirm="confirm1">
			<view class="slot-content" style="padding: 10rpx;">
				<input class="indd" type="number" v-model="value" auto-height placeholder-style=" text-align: center;" placeholder="用户邀请码" :cursor="50" />
			</view>
		</u-modal>
		<u-modal v-model="show1" :title-style="{ color: 'red' }" @confirm="confirm2">
			<view class="slot-content" style="padding: 10rpx;">
				<input class="indd" type="number" v-model="value1" auto-height placeholder-style=" text-align: center;" placeholder="用户邀请码" :cursor="50" />
			</view>
		</u-modal>
		<block v-if="data">
			<view style="width: 100%; height: 100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<!-- 卡片 -->
				<view class="card">
					<view
						style="width: 702rpx;height: 180rpx; background-color: #FFFFFF;display: flex;justify-content: space-around;align-items: center;
					box-shadow:0 1px 11px #B4D4FF; border-radius: 10rpx;"
					>
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<text style="font-size: 36rpx;color: #3187FB;">{{ data.coach ? data.coach : 0 }}人</text>
							<text style="font-size: 28rpx;color: #999999;">教练销售</text>
						</view>
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<text style="font-size: 36rpx;color: #3187FB;">{{ data.user_num ? data.user_num : 0 }}</text>
							<text style="font-size: 28rpx;color: #999999;">意向学员</text>
						</view>
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<text style="font-size: 36rpx;color: #3187FB;">{{ data.sign_up ? data.sign_up : 0 }}</text>
							<text style="font-size: 28rpx;color: #999999;">报名人数</text>
						</view>
					</view>
				</view>

				<!-- 用户列表 -->
				<scroll-view
					:enable-flex="true"
					:show-scrollbar="false"
					@scrolltolower="lower"
					:scroll-y="true"
					style="width: 702rpx;height: 170rpx; display: flex;flex-direction: column; align-items: center;flex: auto;flex-basis: 50vh;
				"
				>
					<!-- item -->
					<view
						class="b"
						style="height: 220rpx; margin-top: 15rpx; display: flex;flex-direction: column;justify-content: center;align-items: center;
						padding-left: 24rpx;padding-right: 24rpx; "
						v-for="(item, index) in list"
						:key="index"
					>
						<view style="height: 220rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<!-- 姓名 -->
							<view style="width: 654rpx;text-align: start;font-size: 32rpx;color: #333333;">{{ item.user_nickname }}</view>
							<!-- 数据情况 -->
							<view style="width: 654rpx;margin-top: 39rpx; display: flex; flex-direction: column;">
								<view style=" display: flex; justify-content: space-between;">
									<view style="font-size: 26rpx;color: #666666;">用户数量</view>
									<view style="font-size: 26rpx;color: #666666; margin: 5rpx;">{{ item.user_number }} 人</view>
								</view>
								<view style="display: flex; justify-content: space-between;">
									<view style="font-size: 26rpx;color: #666666;">报名人数</view>
									<view style="font-size: 26rpx;color: #666666;margin: 5rpx;">{{ item.user_apply }} 人</view>
								</view>
							</view>
							<!-- <view style="width: 702rpx;height: 10rpx;background-color: #F7F8FF;margin-top: 29rpx;"></view> -->
						</view>
					</view>
					<xw-empty :isShow="emptyShow" text="暂无相关数据" textColor="#777777"></xw-empty>
				</scroll-view>
			</view>
		</block>
	</view>
</template>

<script>
import xwEmpty from '@/components/xw-empty/xw-empty';
export default {
	components: { xwEmpty },
	data() {
		return {
			emptyShow: false,
			value: '',
			value1: '',
			show: false,
			show1: false,
			page: 1,
			pagesize: 10,
			limit: 10,
			data: {},
			list: [],
			id: '',
		};
	},
	onLoad() {
		var obj = this.$Route.query.item;
		console.log('obj``````` :>> ', obj);
		this.getData(obj.id);
		this.id = obj.id;
		uni.setNavigationBarTitle({
			title: obj.user_nickname,
		});
	},
	methods: {
		showM(e) {
			if (e == 1) {
				this.show = true;
				this.show1 = false;
			} else {
				this.show = false;
				this.show1 = true;
			}
		},

		jump_p(item) {
			console.log('1111 :>> ', 1111);
			console.log('item :>> ', item);
			this.$Router.push({
				name: 'branchDetails',
				params: {
					item: item,
				},
			});
		},
		// 滑动到页面底部触发
		lower() {
			console.log('滑动到页面底部触发');
			this.getData(this.id);
		},
		async confirm1() {
			if (!this.value) return uni.$showMsg('请填写邀请码');
			let res;
			try {
				res = await this.$request.post('api/User/set_identity', {
					data: {
						uid: uni.getStorageSync('id'),
						invite: this.value,
					},
				});
				uni.$showMsg(res.data.msg);
				this.value = '';
				this.page = 1;
				this.getData();
			} catch (e) {}
		},
		async confirm2() {
			if (!this.value1) return uni.$showMsg('请填写邀请码');
			let res;
			try {
				res = await this.$request.post('api/User/set_person', {
					data: {
						uid: uni.getStorageSync('id'),
						invite: this.value1,
						identity: 2,
					},
				});
				uni.$showMsg(res.data.msg);
				this.page = 1;
				this.value1 = '';
				this.getData();
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
			}
		},

		async getData(uid) {
			let res;
			try {
				res = await this.$request.post('api/User/branch_school1', {
					data: {
						uid,
						page: this.page,
						limit: this.limit,
					},
				});

				console.log('res :>> ', res);
				if (res.data.code == 1) {
					this.data = res.data.data;
					this.list = [...this.list, ...res.data.data.list];

					this.page += 1;
					// !res.data.data && (this.emptyShow = true);
				}

				if (this.page == 1 && res.data.code == 0) {
					console.log('显示为空');
					this.emptyShow = true;
				}
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
			}
		},
	},
};
</script>

<style>
.indd {
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20rpx 0;
	/* padding-left: 20rpx; */
}
.fixed {
	position: fixed;
	bottom: 150rpx;
	right: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200rpx;
	height: 70rpx;
	background: #3187fb;
	opacity: 0.9;
	border-radius: 35rpx;
	z-index: 99999;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}

.card {
	width: 100%;
	height: 236rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3187fb+50,ffffff+50 */
	background: rgb(49, 135, 251);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3187fb', endColorstr='#ffffff', GradientType=0);
	/* IE6-9 */
}
</style>
